<template>

    <div class="mdui-table-fluid">
      <table class="mdui-table mdui-table-hoverable">
        <thead>
        <tr>

          <th>分类名称</th>
          <th>分类id</th>
          <th>展示权重</th>
        </tr>
        </thead>
        <tbody>

          <tr v-for="(item) in data" v-on:click="goEdit(item)">
            <td>{{item.分类名称}}</td>
            <td>{{item.分类id}}</td>
            <td>{{item.分类权重}}</td>
          </tr>




        </tbody>
      </table>
      <div class="mdui-dialog" id="sort_list_dialog">
        <div class="mdui-dialog-title">分类编辑</div>
        <div class="mdui-dialog-content">
          <div class="mdui-textfield">
            <label class="mdui-textfield-label">分类名称</label>
            <input class="mdui-textfield-input" type="text" v-model="name"/>
          </div>
          <div class="mdui-textfield">
            <label class="mdui-textfield-label">分类权重</label>
            <input class="mdui-textfield-input" type="text" v-model="weight"/>
          </div>

        </div>
        <div class="mdui-dialog-actions">
          <button class="mdui-btn mdui-ripple" v-on:click="update()">确定</button>
        </div>

      </div>


    </div>

</template>

<script>
  import * as mdui from "mdui";
  import axios from "axios";
  import qs from "qs";
  import jm from "./../../static/jm"

  const BASE_URL = 'http://127.0.0.1:8886';

  export default {
    name: 'login',
    data () {
      return {
        token: '',
        data:[],
        name:'',
        weight:'',
        sort_id:'',
        inst:''
      }
    },
    methods:{
      goEdit(item){
        this.inst.open();
        this.name=item.分类名称;
        this.weight=item.分类权重;
        this.sort_id=item.分类id;

      },
      update(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/sort/change_sort',
          qs.stringify({token:this.token,id:this.sort_id,name:this.name,weight:this.weight}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {



              this.inst.close();
              this.getdata();

            }
            else
            {
              this.inst.close();
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            this.inst.close();
            mdui.default.alert("网络错误");

          });
      },
      getdata(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/sort/admin_get_sort',
          qs.stringify({token:this.token}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {

              this.data=re.data.列表;

            }
            else
            {
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            mdui.default.alert("网络错误");

          });
      }
    },
    mounted() {
      this.token=window.localStorage.getItem("token");
      if(this.token!=null&&this.token.length==64) {
        this.inst = new mdui.default.Dialog('#sort_list_dialog');
        this.getdata();
      }
    }
  }
</script>
